<template>
  <div>
	  <myheader></myheader>

	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				<Breadcrumb :datas="datas"></Breadcrumb>
			</div>

			<div>
				<table>
				<tr>
					<td>
						用户名：
					</td>
					<td>
						<input type="text" v-model="username" placeholder="输入用户名">
					</td>
				</tr>
				<tr>
					<td>
						密码：
					</td>
					<td>
						<input type="password" v-model="password" >
					</td>

				</tr>
				<!-- 滑块验证码 -->
				<tr>
					<td></td>
					<drag-verify :width="width" :height="height" :text="text" ref="Verify"></drag-verify>
				</tr>
				<tr>
					<td></td>
					<td>
						<Button color="green" @click="submit">登录</Button>
                        <img style="cursor:pointer" src="http://127.0.0.1:8000/static/sina.png" @click="sina">
                        <img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png" alt="">
					</td>
				</tr>
				</table>
			</div>



		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader.vue'
//导入 滑块验证码
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js'



export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
	  username:"",
	  password:"",
	  //声明滑块验证码
	  width:320,
	  height:42,
	  text:"请将滑块拖动到右边"
	  
    }
  },
  //注册组件标签
  components:{
	  myheader,
	  dragVerify
  },
  mounted:function(){

   
  
},
  methods:{
	  //钉钉登录
        dingding(){
            var appid = 'dingoaukgkwqknzjvamdqh'
            var redirect_uri = 'http://localhost:8000/dingding_back/';

            var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
            window.location.href = url;
            
        },
	  //微博新浪登录
        sina:function(){
            console.log(config['baseurl'])
            console.log(formatXml('你好'))

            //组装
            let url ="https://api.weibo.com/oauth2/authorize?client_id=1837903328&redirect_uri=http://127.0.0.1:8000/md_admin/weibo"
            //进行跳转
            window.location.href = url;

        },
	  submit:function(){

		  //判断是否拖动  拖动成功在控制台上显示true
		  console.log(this.$refs.Verify.isPassing)
		  if(this.username==""){
			  this.$Message('你没有输入用户名')
			  return false
		  }
		  if(this.password==""){
			  this.$Message('你没有输入密码')
			  return false
		  }
		  //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/login/',{params:{username:
		  this.username,password:this.password}}).then((result) =>{

			  console.log(result)
			  //登录成功
			  localStorage.setItem("username",result.data.username);
			  localStorage.setItem('uid',result.data.uid)
			  
			  this.$Message(result.data.message)

			  //跳转页面
			  this.$router.push('/')
			  
		  })

	  }

     
  }
}


</script>
 
<style>
/* 样式 */
td {
	padding:10px;
}


</style>